<template>
  <div id="Register">
    <div class="register_banner">
      <img src="../assets/lr_banner.png" alt>
    </div>
    <div class="form-container">
      <form>
        <div class="clearfix">
          <span>国家/地区</span>
          <span class="inputs" @click="selectCity">{{getcity.listName}}</span>
        </div>
        <div class="clearfix">
          <label for="phone">手机号码</label>
          <input v-model="registerData.mobile" type="text" placeholder="请填写手机号码" id="phone">
        </div>
        <div class="clearfix">
          <button
            class="get_code"
            @click="getCoding"
            :class="{disabled:isDisabled}"
            :disabled="isDisabled"
          >{{codeText}}</button>
          <label for="code">验证码</label>
          <input type="text" v-model="registerData.code" placeholder="请输入短信验证码" id="code">
        </div>
        <div class="clearfix">
          <label for="code">推荐码</label>
          <input type="text" v-model="registerData.recommendMobile" placeholder="推荐人手机号（必填P）" id="recommend">
        </div>
      </form>
    </div>
    <!-- login -->
    <div class="login">
      <Btn
        width="5.135135rem"
        height="1.108108rem"
        radius="0.486486rem"
        bg="#7BA6D1"
        col="#fff"
        font="0.405405rem"
        @click="registers"
      >注册</Btn>
      <router-link to="/agreement">注册协议</router-link>
      <router-link to="/login">已有账号，去登录</router-link>
    </div>
  </div>
</template>

<script>
import Btn from "@/components/Btn";
import { register, getCode } from "@/api/api";
import { setTimeout } from 'timers';
import { mapGetters } from 'vuex'

export default {
  name: "register",
  data() {
    return {
      registerData: {
        mobile: "",
        code: "",
        country:'86',
        recommendMobile:''
      },
      codeText: "获取验证码",
      times: 90,
      isDisabled: false,
      resultCode:''
    };
  },
  computed:{
    ...mapGetters({
      getcity:"getcity"
    })
  },
  methods: {
    getCoding(e) {
      // 弹窗
      this.$loading(this);

      e.preventDefault();
      this.isDisabled = true;

      // 请求发送验证码
      this.$axios.post(getCode, { country:this.getcity.listDetail, mobile:this.registerData.mobile })
          .then(res => {
            this.resultCode = res
            // 隐藏
            this.$loading(this).hide()
          });

      // 定时器
      this.timer = setInterval(() => {
        this.times--;
        if (!this.times) {
          clearInterval(this.timer);
          this.codeText = "点击重新获取";
          this.times = 90;
          this.isDisabled = false;
          return false;
        }

        // 改变innerHTML
        this.codeText = `${
          this.times < 10 ? "0" + this.times : this.times
        }秒后重新获取`;
      }, 1000);
    },
    selectCity() {
      this.$router.push('/city')
    },
    registers() {
      // 验证手机号
      if (!(/^1[34578]\d{9}$/.test(this.registerData.mobile)) && !(/^1[34578]\d{9}$/.test(this.registerData.recommendMobile))){
        this.$msg(this, 'warn', '手机号码有误, 请重填');
        return false;
      }

      if (!this.registerData.code) {
        this.$msg(this, 'warn', '验证码不能为空');
        return false;
      }

      if (this.registerData.code != this.resultCode) {
        this.$msg(this, 'warn', '验证码输入错误，请重新输入');
        return false;
      }

      delete this.registerData.code

      // 弹窗
      this.$loading(this);

      this.$axios.post(register, this.registerData)
          .then(res => {
            if (!res) {
              this.$loading(this).hide();
              this.$msg(this, 'correct', '注册成功！');
              this.$push(this, '/login');
            }
          })
    }
  },
  components: {
    Btn
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="stylus" scoped>
@import '../common/styl/mixin'
#Register
  .register_banner
    width 100%
    height rem(275)
    img
      width 100%
      height 100%
      object-fit cover
  .form-container
    box-sizing border-box
    padding rem(30) rem(40) rem(18)
    div
      font-size rem(14)
      color #333
      width 100%
      border-bottom rem(1) solid #999
      margin-bottom rem(18)
      padding-bottom rem(10)
      label
        vertical-align sub
      .inputs, input
        float right
        width 76%
        vertical-align sub
      input
        outline none
        font-size rem(14)
        border 0
      #code
        width 45%
        box-sizing border-box
        padding-right rem(15)
        margin-right rem(94)
      .get_code
        position absolute
        right rem(40)
        border 0
        background-color transparent
        color $btnColor
        border rem(1) solid $btnColor
        border-radius rem(4)
        outline none
  .login
    text-align center
    a
      display block
      margin-top rem(20)
      color $themeColor
      font-size rem(14)
.disabled
  border-color #cccccc !important
  color #ccc !important
</style>
